<template>
  <div class="app-container">
    <!-- 页头 -->
    <div class="home-header">
      <Header></Header>
    </div>
    <!-- 主体区域 -->
    <main class="main">
      <!-- 轮播图 -->
      <Carousel></Carousel>
    </main>
  </div>
</template>

<script setup name="Index">
import Header from "@/components/Home/Header";
import Carousel from "@/components/Home/Carousel";
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";

.app-container {
  padding: 0;
  height: 100%;
  min-height: 50rem;
  background: url(@/assets/images/home/bj.png) no-repeat center;
  background-size: 100% 100%;
}

.home-header {
  padding-top: 3.75rem;
}

.main {
  overflow: hidden;
  height: calc(100% - 140px);
}

:deep(.size-icon--style) {
  color: #ffffff;
}

/******************** 响应式布局 **********************/
@media screen and (max-device-width: 768px) {
  .home-header {
    padding-top: 30px;
  }
}
</style>